
<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :width="'600px'"
  >
    <el-container>
      <el-main
        :style="{ 'max-height': maxHeightDialog }"
        class="container-main"
        :element-loading-text="submitLoading ? '提交中...' : '加载中...'"
      >
        <div class="title">
          <span>填写信息</span>
        </div>
        <el-card class="card" shadow="never" style="background: #fafafa">
          <el-form
            ref="elForm"
            size="small"
            label-position="right"
            :model="form"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="字典名称" prop="dictName">
              <el-input
                v-model="form.dictName"
                placeholder="输入字典名称"
                clearable
              />
            </el-form-item>
            <!-- <el-form-item label="字典值" prop="dictId">
              <el-input
                v-model.number="form.dictId"
                placeholder="输入字典值"
                clearable
                :disabled="params.type == 'edit'"
              />
            </el-form-item> -->
            <el-form-item label="字段名称" prop="fieldName">
              <el-input
                v-model="form.fieldName"
                placeholder="输入字段名称"
                clearable
                :disabled="params.type == 'edit'"
              />
            </el-form-item>
            <el-form-item label="表名" prop="tableName">
              <el-input
                v-model="form.tableName"
                placeholder="输入表名"
                clearable
                :disabled="params.type == 'edit'"
              />
            </el-form-item>
          </el-form>
        </el-card>
      </el-main>
      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          :disabled="submitLoading"
          style="width: 120px; margin-right: 10px"
          @click="isVisible = false"
        >
          取消
        </el-button>
        <el-button
          size="medium"
          type="primary"
          icon="el-icon-check"
          :disabled="submitLoading"
          :loading="submitLoading"
          style="width: 120px"
          @click="toSubmit"
        >
          {{ params.type == 'add' ? '提交' : '修改' }}
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

<script>
import dataFormMixins from '@/mixins/data-form-mixins'
import systemManageApi from '@/api/system-manage'
export default {
  name: 'DictionaryAdd',
  mixins: [dataFormMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {}
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  mounted() {
    this.form = this.initForm()
    this.rules = this.initRules()
    if (this.params.item.dictId !== -1) {
      this.getDetail()
    }
  },
  methods: {
    initForm() {
      return {
        dictName: '', // 字典名称
        dictId: null, // 字典值
        fieldName: '', // 字段名称
        tableName: '', // 表名
        orderNum: null,
      }
    },
    initRules() {
      return {
        dictName: this.getValidatorForm(),
        fieldName: this.getValidatorForm(),
        tableName: this.getValidatorForm(),
      }
    },
    getDetail() {
      this.detailObj = { ...this.params.item }
      this.form = { ...this.detailObj }
    },
    toClose() {
      this.$emit('close')
    },
    toSubmit() {
      this.$refs.elForm.validate((valid) => {
        console.log('form', this.form)
        if (valid) {
          this.submitLoading = true
          const model = this.form
          console.log('提交', model)
          if (this.params.type == 'add') {
            systemManageApi
              .addDict(model)
              .then((ret) => {
                this.submitLoading = false
                this.isVisible = false
                this.$message({
                  message: '提交成功！',
                  type: 'success',
                })
                this.$emit('submit', 'add')
              })
              .catch(() => {
                this.submitLoading = false
              })
          } else {
            systemManageApi
              .updateDict(model)
              .then((ret) => {
                this.submitLoading = false
                this.isVisible = false
                this.$message({
                  message: '修改成功！',
                  type: 'success',
                })
                this.$emit('submit', 'edit')
              })
              .catch(() => {
                this.submitLoading = false
              })
          }
        } else {
          this.$message({
            message: '*必填项不能为空！',
            type: 'warning',
            duration: 4000,
          })
          return false
        }
      })
    },
  },
}
</script>

<style>
</style>

<style lang="scss"  scoped>
@import '../../../../../styles/part-custom';
</style>